Ext.onReady(function() {
			var store = Ext.create('Ext.data.JsonStore', {
						fields : [{
									name : 'cardNumber'
								}, {
									name : 'deptId'
								}, {
									name : 'tel'
								}, {
									name : 'cname'
								}, {
									name : 'status'
								}, {
									name : 'company'
								}, {
									name : 'vehicleType'
								}, {
									name : 'gname'
								}, {
									name : 'vehicleId'
								}, {
									name : 'cardType'
								},{
									name : 'creatDate'
								}],
						pageSize : 20, // 每页多少条
						proxy : {
							type : 'ajax',
							url : 'getAllCard.do',
							reader : {
								type : 'json',
								root : 'icards',
								totalProperty : 'total'
							},
							actionMethods : {
								create : 'POST',
								read : 'POST',
								update : 'POST',
								destroy : 'POST'
							}
						}
					});
			store.loadPage(1);
			/*
			 * { xtype : 'combobox', emptyText : '选择类别', store :
			 * Ext.create('Ext.data.Store',{ fields:['value','text'], data :
			 * [{value:0,text:'页面'},{value:1,text:'操作'}] }), valueField :
			 * 'value', displayField : 'text', fieldLabel : '类别', name : 'ifc' }
			 */
			// 查询表单
			var sform = Ext.create('Ext.form.Panel', {
						frame : true,
						standardSubmit:true, //让表单以非Ajax方式提交
						layout : {
							type : 'table',
							columns : 3
						},
						defaults : {
							xtype : 'textfield',
							labelAlign : 'right',
							labelWidth : 80
						},
						region : 'north',
						items : [{
									fieldLabel : '发卡站点',
									name : 'deptId'
								}, {
									fieldLabel : '客户单位',
									name : 'company'
								}, {
									xtype : 'combobox',
									fieldLabel : '卡类型',
									store : Ext.create('Ext.data.Store', {
												fields : ['value', 'text'],
												data : [{
															vlaue : '',
															text : '所有'
														}, {
															value : '1用户卡',
															text : '1用户卡'
														}, {
															value : '2员工卡',
															text : '2员工卡'
														}, {
															value : '4维修卡',
															text : '4维修卡'
														}, {
															value : '5内部卡',
															text : '5内部卡'
														}, {
															value : '6积分卡',
															text : '6积分卡'
														}, {
															value : '8大客户卡',
															text : '8大客户卡'
														}, {
															value : '9充值优惠卡',
															text : '9充值优惠卡'
														}]
											}),
									valueField : 'value',
									displayField : 'text',
									name : 'cardType'
								}, {
									xtype : 'combobox',
									store : Ext.create('Ext.data.Store', {
												fields : ['value', 'text'],
												data : [{
															vlaue : '',
															text : '所有'
														}, {
															value : 'LNG车队',
															text : 'LNG车队'
														}, {
															value : 'LNG客车',
															text : 'LNG客车'
														}, {
															value : 'LNG重车',
															text : 'LNG重车'
														}, {
															value : '出租车',
															text : '出租车'
														}, {
															value : '大客户车',
															text : '大客户车'
														}, {
															value : '大型货车',
															text : '大型货车'
														}, {
															value : '大型客车',
															text : '大型客车'
														}, {
															value : '单位车',
															text : '单位车'
														}, {
															value : '工程车',
															text : '工程车'
														}, {
															value : '公交车',
															text : '公交车'
														}, {
															value : '集团自用车',
															text : '集团自用车'
														}, {
															value : '教练车',
															text : '教练车'
														}, {
															value : '农用车',
															text : '农用车'
														}, {
															value : '私家车',
															text : '私家车'
														}, {
															value : '小型货车',
															text : '小型货车'
														}, {
															value : '小型客车',
															text : '小型客车'
														}, {
															value : '员工卡',
															text : '员工卡'
														}]
											}),
									valueField : 'value',
									displayField : 'text',
									fieldLabel : '车辆类型',
									name : 'vehicleType'
								}, {
									fieldLabel : '车牌号码',
									name : 'vehicleId'
								}, {
									fieldLabel : '身份证号码',
									name : 'IDcard'
								}, {
									fieldLabel : 'IC卡号',
									name : 'cardNumber'
								}, {
									fieldLabel : '卡拥有人',
									name : 'cname'
								}, {
									fieldLabel : '手机号码',
									name : 'tel'
								}, {
									xtype :'datefield',
									fieldLabel : '开始时间',
									name : 'startdate',
									format : 'Y-m-d H:i:s',
									maxValue: new Date() 
								},{
									xtype :'datefield',
									fieldLabel : '结束时间',
									format : 'Y-m-d H:i:s',
									name : 'enddate'
								},{
									xtype : 'button',
									margin : '0 0 0 10',
									iconCls : 'button-search',
									text : '查询',
									handler : sear
								}]
					});
			function sear() {
				var values = sform.getForm().getValues();
				store.proxy.extraParams = values;
				store.loadPage(1);
			}
			// 中央表格面板
			/*
			 * var selModel = Ext.create('Ext.selection.CheckboxModel', {
			 * injectChectbox : 1 });
			 */
			var grid = Ext.create('Ext.grid.Panel', {
						region : 'center',
						columnLines : true,
						// selModel : selModel,
						viewConfig : {
							stripeRows : true
							// 在表格中显示斑马线
						},
						store : store,// 底部工具栏配置了，这里也必须配置
						tbar : [{
									xtype : 'button',
									text : '导出',
									iconCls : 'button-add',
									handler :function(){
											var form = sform.getForm();
											form.url="exportexcel.do";
											form.submit();
									}
								}],
						columns : [{
									xtype : "rownumberer",
									width : 60,
									align : 'center',
									header : '序号'
								}, {
									header : '卡号',
									width : 100,
									align : 'center',
									dataIndex : 'cardNumber'
								}, {
									header : '持卡人',
									width : 80,
									align : 'center',
									dataIndex : 'cname'
								}, {
									header : '卡类型',
									width : 80,
									align : 'center',
									dataIndex : 'cardType'
								}, {
									header : '客户单位',
									width : 140,
									align : 'left',
									dataIndex : 'company'
								}, {
									header : '车辆类型',
									width : 80,
									align : 'center',
									dataIndex : 'vehicleType'
								}, {
									header : '车牌号',
									width : 80,
									align : 'center',
									dataIndex : 'vehicleId'
								}, {
									header : '卡状态',
									width : 80,
									align : 'center',
									dataIndex : 'status'
								}, {
									header : '发卡站点',
									width : 140,
									align : 'left',
									dataIndex : 'deptId'
								}, {
									header : '发卡人',
									width : 100,
									align : 'center',
									dataIndex : 'gname'
								}, {
									header : '发卡日期',
									width : 160,
									align : 'center',
									dataIndex : 'creatDate',
									renderer : function (value){
											if (value == null || value == '') {
												return '<font color="red">未指定</font>';
											}else{
												return new Date(value).format("yyyy-MM-dd hh:mm:ss");
										}
									}
								}, {
									xtype : 'actioncolumn',
									text : '查看',
									align : 'center'
								}],
						dockedItems : [{
									xtype : 'pagingtoolbar',
									store : store, // 分页数据使用跟gridPanel同样的数据
									dock : 'bottom',
									displayMsg : '显示{0}-{1}条,共{2}条',
									emptyMsg : "没有数据",
									beforePageText : '第',
									afterPageText : '页共{0}页',
									displayInfo : true
								}]
					});
			Ext.create('Ext.Viewport', {
						title : '主要内容',
						layout : 'border',
						items : [sform, grid],
						renderTo : Ext.getBody()
					});
		});
